<template>
<div id="appChirld" @click="show">
  <MyTable></MyTable>
  <MyNav></MyNav>
  <div class="rootBtn">
    <button @click.stop="add">添加</button>
  </div>
</div>
<div v-if="$store.state.show">
  <MyInput></MyInput>
</div>
</template>

<script>
import MyTable from './components/MyTable'
import MyNav from './components/MyNav'
import MyInput from './components/MyInput.vue'

export default {
  name: 'App',
  components: {
    MyTable,
    MyNav,
    MyInput
  },
  methods:{
    add(){
      this.$store.state.show = true
    },
    show(){
      this.$store.state.show = false
    }
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
html,body,#app,#appChirld{
  height: 100%;
}
.rootBtn{
  margin: 0 auto;
  width: 100px;
  text-align: center;
  margin-top: 10px;
}
.on{
  background-color: antiquewhite;
}
.onIndex{
  background-color: rgb(126, 80, 21);
}
</style>
